<div class="mt-3" *ngIf="completed" style="height: 100%;">
  <div nz-row class="pl-3 pr-3">
    <img class="float-left" (click)="enterToUser()" [src]="userImg">
    <img class="float-right" (click)="buyTime()" [src]="vipImg">
  </div>
  <app-swiper-instance *ngIf="slideLoading" [slides]="slides"></app-swiper-instance>
  <div class="text-center mt-3" style="height: 200px" *ngIf="!isLoading">
    <img (click)="connectControl()" [src]="splashImg" onerror="this.src=errorImg">
  </div>
  <div class="text-center mt-2" style="height: 200px" *ngIf="isLoading">
    <svg
            height="100%"
            viewBox="0 0 38 38"
    >
      <text x="14" y="21" class="animate-text" font-size="2px" style="letter-spacing: 1px"
            fill="grey">{{loadingText}}</text>
      <path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
C34.797,11.841,28.159,5.203,20,5.203z">
      </path>

      <path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
      </path>

      <path class="fa-rotate-2" fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20
  c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
      </path>
      <path fill="#859900" class="fa-rotate-18" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
C12.875,32.922,7.078,27.125,7.078,20z">
      </path>
    </svg>
  </div>
    <div class="row text-center mt-2">
        <nz-tag>{{connectInfo}}</nz-tag>
    </div>
  <ng-template #lineTitle>
    <span class="pt-4">当前线路</span><i nz-icon nzType="oplatform:right"></i>
  </ng-template>
  <ng-template #timeTitle>
    <span class="pt-4">到期时间</span>
  </ng-template>
  <ng-template #flowTitle>
    <span class="pt-4">剩余流量</span>
  </ng-template>
  <ng-template #appTitle>
    <span class="pt-4">应用代理</span>
  </ng-template>
  <ng-template #proxyTitle>
    <span class="pt-4">路由模式</span>
  </ng-template>
  <ng-template #appAvatar>
    <nz-avatar nzSize="large" [nzSrc]="appImg"></nz-avatar>
  </ng-template>
  <ng-template #timeAvatar>
    <nz-avatar nzSize="large" [nzSrc]="timeImg"></nz-avatar>
  </ng-template>
  <ng-template #lineAvatar>
    <nz-avatar nzSize="large" [nzSrc]="lineImg"></nz-avatar>
  </ng-template>
  <ng-template #proxyAvatar>
    <nz-avatar nzSize="large" [nzSrc]="proxyImg"></nz-avatar>
  </ng-template>
  <ng-template #timeAvatar>
    <nz-avatar nzSize="large" [nzSrc]="timeImg"></nz-avatar>
  </ng-template>
  <ng-template #flowAvatar>
    <nz-avatar nzSize="large" [nzSrc]="flowImg"></nz-avatar>
  </ng-template>
  <ng-template #timeDescription>
    <nz-tag nz-row [nzColor]="'#f50'">{{vipInfo}}</nz-tag>
    <span nz-row>{{endTime}}</span>
  </ng-template>
  <div nz-row style="background-color: white" class="ml-1 mr-1 mt-5 rounded">
    <nz-card nz-col nzSpan="12" [nzBordered]="false">
      <nz-card-meta
              [nzAvatar]="timeAvatar"
              [nzTitle]="timeTitle"
              [nzDescription]="timeDescription">
      </nz-card-meta>
    </nz-card>
    <nz-card nz-col nzSpan="12" class="border-left" [nzBordered]="false">
      <nz-card-meta
              [nzAvatar]="flowAvatar"
              [nzTitle]="flowTitle"
              nzDescription="{{enableUseTraffic}}"
      ></nz-card-meta>
    </nz-card>
  </div>
<!--  手机端的分应用代理和路由模式-->
  <div nz-row style="background-color: white" class="ml-1 mr-1 border-top rounded" *ngIf="!isMobile">
    <nz-card nz-col nzSpan="12" [nzBordered]="false" (click)="changeAppProxy()">
      <nz-card-meta
        [nzAvatar]="appAvatar"
        [nzTitle]="appTitle"
        nzDescription="{{isAppProxy}}">
      </nz-card-meta>
    </nz-card>
    <nz-card nz-col nzSpan="12" class="border-left" [nzBordered]="false" (click)="changeProxyModel()">
      <nz-card-meta
        [nzAvatar]="proxyAvatar"
        [nzTitle]="proxyTitle"
        nzDescription="{{routerModel}}"
      ></nz-card-meta>
    </nz-card>
  </div>

  <div nz-row style="background-color: white" class="ml-1 mr-1 rounded" (click)="changeLine()">
    <nz-card>
      <nz-card-meta
              [nzAvatar]="lineAvatar"
              [nzTitle]="lineTitle"
              nzDescription="{{current_node_info}}{{current_node_delay}}">
      </nz-card-meta>
    </nz-card>
  </div>
</div>
